<template>
  <div class="content-list">
    <div  v-if="contentList.length > 0">
      <ul class="section-content">
        <li class="content-item" v-for="(item, index) in contentList" :key="index">
          <!--点击相片触发的方法-->
          <div class="kuo" @click="goAblum(item.id, item.list || index, item.name)">
            <!--加载图片-->
            <img class="item-img" :src="item.picture || item.avator" alt="">
            <!--这句没什么用，是那个播放图标的-->
            <div class="mask"  @click="goAblum(item.id, item.list || index, item.name)">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bofang"></use>
              </svg>
            </div>
          </div>
          <!--名字和标题-->
          <p class="item-name">{{item.name || item.title}}</p>
        </li>
      </ul>
    </div>
    <div v-else>
      <span class="noList">
        暂无歌单
      </span>
    </div>
  </div>
</template>

<script>
import {mixin} from '../mixins'

export default {

  name: 'content-list',
  props: [
    /* [{
	        "id": 2,
	        "title": "年轻之歌 有关爱与挑衅",
	        "pic": "/img/songListPic/wv2NdfZrUnLDSwk_kQoSZg==_109951163751040922.jpg",
	        "style": "华语",
	        "introduction": "歌单"
}]
    或者
    [{
	"id": 1,
	"name": "张杰",
	"sex": 1,
	"pic": "/img/singerPic/zhangjie.jpg",
	"birth": "1982-12",
	"location": "中国四川",
	"introduction": "华语歌坛新生代领军人物，偶像与实力兼具的超人气天王。2004年出道至今，已发行9张高品质唱片，唱片销量称冠内地群雄。2008年以来举办过9场爆满的个人演唱会，在各大权威音乐奖项中先后21次获得“最受欢迎男歌手”称号，2012年度中国TOP排行榜内地最佳男歌手，2010年在韩国M-net亚洲音乐大赏(MAMA)上获得“亚洲之星”（Best Asian Artist）大奖，影响力触及海外。"
}]


*/
    // 0是歌单列表，1是歌手列表
    'contentList'
  ],
  mixins: [mixin],
  methods: {
    // 歌曲相册;在这个vue组件没用到
    goSongAlbum (id, index) {
      this.$store.commit('setIndex', index)
      window.sessionStorage.setItem('index', JSON.stringify(index))
      this.$router.push({path: '/song-list-album-page/' + id})
    },

    goAblum (id, index, type) {
      this.$store.commit('setIndex', index)    //去到store/index.js的方法
      window.sessionStorage.setItem('index', JSON.stringify(index))  //存index到session storage进去有什么用呢
      if (type) {
        this.$router.push({path: '/singer-album-page/' + id})
      } else {
        this.$router.push({path: '/song-list-album-page/' + id})
      }
    },
  }
}
</script>

<style scoped>
  .noList {
    display: inline-block;
    font-size: 2.3em;
    margin-top: 50px;
    margin-left: 45%;
  }
  *{
    box-sizing: border-box;
  }
  .content-list {
    padding: 0 20px;
  }
  .section-content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .content-item {
    flex-flow: column wrap;
    width: 18%;
    margin: 20px 1%;
    overflow: hidden;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  li:hover{
    -webkit-box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.4);
  }
  li:hover .item-img{
    transform: scale(1.1);
  }
  .item-img {
    width: 100%;
    transition: all 0.4s ease;
  }
  .kuo, .mask {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
  }
  .mask{
    position: absolute;
    top:0;
    background-color: rgba(52,47,41,.4);
    transition:all .3s ease-in-out;
    opacity: 0;
    display: flex;
    justify-content: center;
  }
  .mask > .icon {
    position: absolute;
    top: 40%
  }
  .mask:hover{
    opacity: 1;
    cursor: pointer;
  }
  .item-name {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    margin: 10px 8px;
  }
  .icon {
    width: 2.5em;
    height: 2.5em;
    fill: currentColor;
    color: rgba(240,240,240,1);
    font-size: 1.6em;
  }

</style>
